<template>
  <div class="buttons">
    <div class="btns">
      <el-button class="buttonStyle" @click="clickBtn(item.method)" :class="item.type + ' ' + item.size" v-for="(item, index) of buttons" :key="index" :disabled="item.disabled" :loading="loading">
        {{item.text}}
      </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      buttons:{
        type:Array
      }
    },
    data(){
      return{
        loading:false
      }
    },
    methods:{
      clickBtn(method){
        if(method){
          this.loading = true;
          let ns = this;
          (async function (ns){
            await ns.$emit(method)
            ns.loading = false;
          }(ns))
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/styles/mixin.scss";
  .buttons{
    display: flex;
    justify-content: center;
    .btns{
      display: flex;
      .normal{
        background-color: $colorM;
        color: $colorA
      }
      .success{
        background-color: $colorA;
        color: $colorH;
      }
      .error{
        background-color: $colorRed;
        color: $colorH;
      }
      .weakSuccess{
        background-color: $colorWeakMain;
        color: $colorH;
      }
      .normal-hover{
        background-color: $colorM;
        color: $colorA;
        &:hover{
          background-color: $colorA;
          color: $colorH;
        }
      }
      .gray{
        background-color: $colorGray;
        color: $colorH;
      }
      .s{
        @include mBwhlf()
      }
      .m{
        @include mBwhlf(108px,32px,32px,14px)
      }
      .l{
        @include mBwhlf(120px,40px,40px,16px)
      }
      .xl{
        @include mBwhlf(130px,40px,40px,16px)
      }
      .xxl{
        @include mBwhlf(140px,40px,40px,16px)
      }
    }
    .btns :nth-last-child(1){
      margin-right: 0;
    }
  }
</style>